<template>
	<view>
		<u-mask :show="loading" :custom-style="{background: 'rgba(0, 0, 0, 0)'}">
			<view class="warp">
				<u-loading mode="flower"></u-loading>
			</view>
		</u-mask>
		<view class="back" v-if="!is_play">
			<uni-icons type="back" color="#dbdbdb" @click="to_index" size="30"></uni-icons>
		</view>
		<view>
			<view class="video-img" v-if="!is_play" :style="{'background-image': 'url(' + product_info.image + ')'}" @click="play">
				<u-icon style="margin-top: 160rpx;" name="../../static/play.png" size="100"></u-icon>
			</view>
			<video v-else :src="product_info.video_link" :direction="direction" style="width: 100%;" :controls="true" :autoplay="true">
				<cover-image class="back" style="top: 35rpx;left:35rpx;" src="../../static/back.png" @click="to_index"></cover-image>
			</video>
		</view>
		<view class="content">
			<view>
				<u-tabs :list="tab_list" name="name" :current="tab_key" 
				item-width="33.33%" active-color="#65a4f8" @change="tab_change"></u-tabs>
			</view>
			<view style="padding: 20rpx;" v-if="tab_key == 1">
				<rich-text :nodes="product_info.description"></rich-text>
			</view>
			<view style="padding: 20rpx;" v-if="tab_key == 0">
				<image :src="teacher_info.introduction" style="width: 100%;" mode="widthFix"></image>
			</view>
		</view>
		<uni-goods-nav class="goods-nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @buttonClick="to_study"></uni-goods-nav>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'; 
	export default {
		computed: mapState(['uerInfo']),
		data() {
			return {
				loading:true,
				product_id: 0,
				product_info:[],
				teacher_info:[],
				is_play:0,
				tab_list:[
					{name:'老师简介'},
					{name:'课程说明'},
					{name:'课堂讨论'}
				],
				tab_key:0,
				options:[
					{
						icon: 'headphones',
						text: '试听'
					},
					{
						icon: '',
						text: ''
					},
					{
						icon: '',
						text: ''
					},
					{
						icon: '',
						text: ''
					}
				],
				buttonGroup: [
					{
						text: '购买课程',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '开始学习',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
				direction:-90
			}
		},
		onLoad(option) {
			this.product_id = option["pruduct_id"];
			this.init();
		},
		methods: {
			to_index() {
				uni.switchTab({
					url:'index'
				})
			},
			to_study(e){
				if(e.index){
					if(!this.product_info.is_buy) {
						this.$toast_fail({msg:'请购买课程'});
						uni.navigateTo({
							url:'buy?pruduct_id=' + this.product_id
						})
						return false;
					}
					uni.navigateTo({
						url:'study?pruduct_id=' + this.product_id
					})
				} else {
					if(this.product_info.is_buy) {
						this.$toast_fail({msg:'已购买，开始学习'});
						uni.navigateTo({
							url:'study?pruduct_id=' + this.product_id
						})
						return false;
					}
					uni.navigateTo({
						url:'buy?pruduct_id=' + this.product_id
					})
				}
			},
			tab_change(e) {
				this.tab_key = e;
			},
			init() {
				uni.request({
					url: `${this.$serverUrl}/product/detail/${this.product_id}`,
					header: {
						"Content-Type": "application/json"
					},
					data: {
						"uid": this.uerInfo.uid,
					},
					method: "GET",
					success: (e) => {
						this.loading = false;
						if (e.data.status == 200) {
							this.product_info = e.data.data.storeInfo;
							if(this.product_info.is_buy){
								this.buttonGroup[0]['backgroundColor'] = '#dbdbdb';
							} else {
								this.buttonGroup[1]['backgroundColor'] = '#dbdbdb';
							}
							this.teacher_info = e.data.data.system_store;
						} else {
							this.$toast_fail(e.data);
						}
					},
					fail: (e) => {
						this.$toast_fail({msg:"请求失败"});
					}
				});
			},
			play() {
				if(!this.product_info.is_buy) {
					this.$toast_fail({msg:'请购买课程'});
					uni.navigateTo({
						url:'buy?pruduct_id=' + this.product_id
					})
					return false;
				}
				this.is_play = 1;
			}
		}
	}
</script>

<style>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.back {
		position: fixed;
		width: 50rpx;
		height: 50rpx;
		left: 30rpx;
		top: 30rpx;
		z-index: 100;
	}
	.video-img {
		width: 100%;
		height: 225px;
		background-size: 100% 100%;
		text-align: center;
	},
	.content {
		width: 100%;
		padding: 0 0 0 0;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.1);
		border-radius: 15upx;
		margin-bottom: 100rpx;
	},
	.goods-nav {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	uni-rich-text img {
		max-width: 100% !important;
	}
</style>
